<template>
  <el-row>
    <!-- 左侧容器和组件 -->
    <el-col :span="4">
      <h3>容器</h3>
      <draggable
        class="left-panel"
        :list="leftContainerList"
        :group="{ name: 'containerGroup', pull: 'clone', put: false }"
        :clone="cloneContainer"
        :sort="false"
      >
        <el-card
          v-for="(container, index) in leftContainerList"
          :key="`container-${index}`"
          class="draggable-item small-item"
          shadow="hover"
        >
          <el-row align="middle">
            <el-col :span="6">
              <i class="el-icon-box"></i>
            </el-col>
            <el-col :span="18">
              <p>{{ container.name }}</p>
            </el-col>
          </el-row>
        </el-card>
      </draggable>

      <h3>组件</h3>
      <draggable
        class="left-panel"
        :list="leftComponentList"
        :group="{ name: 'componentGroup', pull: 'clone', put: false }"
        :sort="false"
      >
        <el-card
          v-for="(component, index) in leftComponentList"
          :key="`component-${index}`"
          class="draggable-item small-item"
          shadow="hover"
        >
          <el-row align="middle">
            <el-col :span="6">
              <i class="el-icon-s-operation"></i>
            </el-col>
            <el-col :span="18">
              <p>{{ component.name }}</p>
            </el-col>
          </el-row>
        </el-card>
      </draggable>
    </el-col>

    <!-- 中间工作区 -->
    <el-col :span="14">
      <h3>右侧工作区</h3>
      <draggable
        class="right-panel"
        v-model="rightContainerList"
        :group="{ name: 'containerGroup', pull: true, put: ['containerGroup'] }"
        :sort="true"
        @end="handleRightDragEnd"
      >
        <el-row :gutter="20">
          <el-col
            v-for="(container, index) in rightContainerList"
            :key="`right-container-${index}`"
            :span="8"
          >
            <el-card class="draggable-container" shadow="hover">
              <!-- 如果容器内没有组件，显示加号提示 -->
              <div v-if="!container.components.length" class="add-icon-container">
                <i class="el-icon-plus add-icon"></i>
              </div>

              <!-- 组件只能被拖入到容器内部 -->
              <draggable
                class="components"
                v-model="container.components"
                :group="{ name: 'rightComponentGroup', put: ['componentGroup'] }"
                :sort="true"
                @end="handleInnerDragEnd(index)"
              >
                <el-card
                  v-for="(component, cIndex) in container.components"
                  :key="`component-${index}-${cIndex}`"
                  class="draggable-item"
                  shadow="hover"
                  @click="selectComponent(component)"
                >
                  {{ component.name }}
                </el-card>
              </draggable>
            </el-card>
          </el-col>
        </el-row>
      </draggable>
    </el-col>

    <!-- 右侧配置区域 -->
    <el-col :span="6">
      <h3>组件配置</h3>
      <div v-if="selectedComponent">
        <el-form :model="selectedComponent">
          <el-form-item label="组件名称">
            <el-input v-model="selectedComponent.name"></el-input>
          </el-form-item>
          <!-- 可以在这里添加其他需要配置的属性 -->
        </el-form>
      </div>
      <div v-else>
        <p>请选择一个组件进行配置</p>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: { draggable },
  data() {
    return {
      leftContainerList: [
        { name: "容器1" },
        { name: "容器2" },
      ],
      leftComponentList: [
        { name: "按钮" },
        { name: "文本" },
      ],
      rightContainerList: [], // 右侧的容器列表
      selectedComponent: null, // 存储当前选中的组件
    };
  },
  methods: {
    cloneContainer(original) {
      // 克隆左侧容器
      return {
        name: original.name,
        components: [],
      };
    },
    handleRightDragEnd(evt) {
      console.log('右侧拖拽结束:', evt.newIndex, evt.oldIndex);
      console.log('新排序的容器列表:', this.rightContainerList);
    },
    handleInnerDragEnd(containerIndex) {
      console.log('组件拖拽完成', containerIndex);
    },
    selectComponent(component) {
      // 点击组件时，选中该组件以显示配置项
      this.selectedComponent = component;
    }
  },
};
</script>

<style scoped>
.left-panel {
  margin-bottom: 20px;
}

.right-panel {
  padding: 20px;
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  min-height: 300px;
}

.draggable-item {
  margin-bottom: 10px;
  text-align: center;
  font-size: 14px;
  padding: 12px 0;
}

.small-item {
  padding: 8px 0;
  font-size: 12px;
}

.draggable-container {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #fff;
  position: relative;
}

.add-icon-container {
  text-align: center;
  padding: 40px;
  background-color: #f0f4f7;
  border: 2px dashed #c0c4cc;
  border-radius: 4px;
}

.add-icon {
  font-size: 36px;
  color: #409eff;
  transition: color 0.3s;
}

.add-icon-container:hover .add-icon {
  color: #66b1ff;
}

.components {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.draggable-item {
  width: 100%;
  text-align: center;
  padding: 10px;
  background-color: #e8f4ff;
  border-radius: 4px;
  border: 1px solid #c6e2ff;
}
</style>
